import React, { useState } from 'react'
import { Row, Col, Button, Popover } from 'antd'
import { WechatOutlined, PhoneOutlined, CloseOutlined } from '@ant-design/icons'
import style from './style.module.css'
import h1 from './hi.png'
import mm from './mm.png'
import './style.less'

const tel = () => '010 - 8648 - 3029'
const weixin = () => {
  return <img src={mm} alt="" />
}

export default function Activity() {

  const [count, setCount] = useState('');

  return <Row id="Activity" className={`${style.activity}  ${count}`} >
    <Col span={24} >
      <div className={style.center} >
        <div className={style.img} >
          <img src={h1} alt="" />
        </div>
        <span className={style.span}>￥9.9</span>/2节小班直播课+课程顾问陪伴式学习
        <Popover content={tel} trigger="hover">
          <Button className={style.Buttonimg} shape="round" type="primary" icon={<WechatOutlined />} >电话咨询</Button>
        </Popover>

        <Popover content={weixin} trigger="hover">
          <Button className={style.Buttonimg} shape="round" type="primary" icon={<PhoneOutlined />}>微信咨询</Button>
        </Popover>

      </div>
    </Col>
    <CloseOutlined onClick={() => setCount('d-none')} className={style.icon} />
  </Row>
}